<template>
    <footer id="footer" class="footer">
      <div class="footer-container">
        <div class="footer-content">
          <div class="footer-info">
            <div class="footer-logo">
              <span class="logo-text">{{ profile.name.charAt(0) }}</span>
              <h3>{{ profile.name }}</h3>
            </div>
            <p class="footer-description">{{ profile.shortBio }}</p>
            <div class="social-links">
              <a v-for="(link, index) in profile.socialLinks" :key="index" 
                 :href="link.url" target="_blank" :title="link.name"
                 class="social-link">
                <!-- 这里可以使用实际的图标 -->
                <span>{{ link.name }}</span>
              </a>
            </div>
          </div>
          
          <div class="footer-contact">
            <h3>联系我</h3>
            <div class="contact-info">
              <div class="contact-item">
                <span class="contact-label">邮箱：</span>
                <a :href="`mailto:${profile.email}`">{{ profile.email }}</a>
              </div>
              <div v-if="profile.phone" class="contact-item">
                <span class="contact-label">电话：</span>
                <a :href="`tel:${profile.phone}`">{{ profile.phone }}</a>
              </div>
              <div v-if="profile.location" class="contact-item">
                <span class="contact-label">地点：</span>
                <span>{{ profile.location }}</span>
              </div>
            </div>
          </div>
          
          <div class="footer-quick-links">
            <h3>快速链接</h3>
            <ul>
              <li v-for="(item, index) in quickLinks" :key="index">
                <a :href="item.path" @click.prevent="scrollToSection(item.path)">{{ item.label }}</a>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="footer-bottom">
          <p class="copyright">&copy; {{ currentYear }} {{ profile.name }}. 保留所有权利。</p>
        </div>
      </div>
    </footer>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  
  const props = defineProps({
    profile: {
      type: Object,
      required: true
    }
  });
  
  const quickLinks = [
    { label: '首页', path: '#banner' },
    { label: '作品', path: '#works' },
    { label: '关于我', path: '#about' },
    { label: '联系方式', path: '#footer' }
  ];
  
  const currentYear = computed(() => new Date().getFullYear());
  
  const scrollToSection = (path) => {
    const sectionId = path.replace('#', '');
    const section = document.getElementById(sectionId);
    
    if (section) {
      const offsetTop = section.offsetTop;
      
      window.scrollTo({
        top: offsetTop - 80,
        behavior: 'smooth'
      });
    }
  };
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/variables.scss';
  @import '../styles/responsive.scss';
  
  .footer {
    padding: 5rem 2rem 2rem;
    background-color: #f8faff;
    position: relative;
    overflow: hidden;
    
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background: linear-gradient(to right, $primary-color, $accent-color);
    }
    
    &-container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    &-content {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 4rem;
      margin-bottom: 3rem;
      
      @include tablet {
        grid-template-columns: 1fr 1fr;
      }
      
      @include mobile {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    }
    
    &-info {
      .footer-logo {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
        
        .logo-text {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, $primary-color, $accent-color);
          color: white;
          font-weight: 700;
          font-size: 1.5rem;
          border-radius: 8px;
          margin-right: 1rem;
        }
        
        h3 {
          font-size: 1.5rem;
          color: $text-color;
        }
      }
      
      .footer-description {
        line-height: 1.6;
        color: $text-secondary;
        margin-bottom: 1.5rem;
      }
      
      .social-links {
        display: flex;
        gap: 1rem;
        
        .social-link {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: white;
          border-radius: 50%;
          color: $primary-color;
          text-decoration: none;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;
          
          &:hover {
            background-color: $primary-color;
            color: white;
            transform: translateY(-3px);
          }
          
          span {
            font-size: 0.8rem;
          }
        }
      }
    }
    
    &-contact, &-quick-links {
      h3 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
        color: $text-color;
        position: relative;
        
        &:after {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 0;
          width: 40px;
          height: 2px;
          background: linear-gradient(to right, $primary-color, $accent-color);
        }
      }
    }
    
    .contact-info {
      .contact-item {
        margin-bottom: 1rem;
        
        .contact-label {
          font-weight: 600;
          color: $text-color;
          margin-right: 0.5rem;
        }
        
        a {
          color: $primary-color;
          text-decoration: none;
          transition: color 0.3s ease;
          
          &:hover {
            color: $accent-color;
            text-decoration: underline;
          }
        }
      }
    }
    
    &-quick-links {
      ul {
        list-style: none;
        padding: 0;
        
        li {
          margin-bottom: 0.8rem;
          
          a {
            color: $text-secondary;
            text-decoration: none;
            transition: color 0.3s ease;
            position: relative;
            padding-left: 1.2rem;
            
            &:before {
              content: '';
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background-color: $primary-color;
            }
            
            &:hover {
              color: $primary-color;
              padding-left: 1.5rem;
            }
          }
        }
      }
    }
    
    &-bottom {
      border-top: 1px solid rgba($text-color, 0.1);
      padding-top: 2rem;
      text-align: center;
      
      .copyright {
        color: $text-secondary;
        font-size: 0.9rem;
      }
    }
  }
  </style>